<template>

    <div class="settings-widget">
        <div class="settings-inner-blk p-0">
            <div class="sell-course-head comman-space">
                <div class="d-flex align-items-center justify-content-between">

                    <div>
                        <h3>我的班级</h3>
                        <p>您累积教授班级：143，正在教授的班级：12</p>
                    </div>
                    <div class="ticket-btn-grp">
                        <a href="#" class="btn btn-primary">创建班级</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="showing-list">
        <div class="row">
            <div class="col-lg-6">
                <div class="d-flex align-items-center">
                    <div class="view-icons">
                        <a href="course-grid.html" class="grid-view active"><i class="feather-grid"></i></a>
                        <a href="course-list.html" class="list-view"><i class="feather-list"></i></a>
                    </div>
                    <div class="show-result">
                        <h4>Showing 1-9 of 50 results</h4>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="show-filter add-course-info">
                    <form action="#">
                        <div class="row gx-2 align-items-center">
                            <div class="col-md-6 col-item">
                                <div class=" search-group">
                                    <i class="feather-search"></i>
                                    <input type="text" class="form-control" placeholder="Search our courses">
                                </div>
                            </div>
                            <div class="col-md-6 col-lg-6 col-item">
                                <div class="form-group select-form mb-0">
                                    <select class="form-select select" id="sel1" name="sellist1">
                                        <option>Newly published </option>
                                        <option>published 1</option>
                                        <option>published 2</option>
                                        <option>published 3</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4 col-md-6 d-flex">
            <div class="course-box course-design d-flex ">
                <div class="product">
                    <div class="product-img">
                        <a href="course-details.html">
                            <img class="img-fluid" alt="" src="assets/img/course/course-10.jpg">
                        </a>
                        <div class="price">
                            <h3>$300 <span>$99.00</span></h3>
                        </div>
                    </div>
                    <div class="product-content">
                        <div class="course-group d-flex">
                            <div class="course-group-img d-flex">
                                <a href="instructor-profile.html"><img src="assets/img/user/user1.jpg" alt=""
                                        class="img-fluid"></a>
                                <div class="course-name">
                                    <h4><a href="instructor-profile.html">Rolands R</a></h4>
                                    <p>Instructor</p>
                                </div>
                            </div>
                            <div class="course-share d-flex align-items-center justify-content-center">
                                <a href="#rate"><i class="fa-regular fa-heart"></i></a>
                            </div>
                        </div>
                        <h3 class="title"><a href="course-details.html">Information About UI/UX
                                Design Degree</a></h3>
                        <div class="course-info d-flex align-items-center">
                            <div class="rating-img d-flex align-items-center">
                                <img src="assets/img/icon/icon-01.svg" alt="">
                                <p>12+ Lesson</p>
                            </div>
                            <div class="course-view d-flex align-items-center">
                                <img src="assets/img/icon/icon-02.svg" alt="">
                                <p>9hr 30min</p>
                            </div>
                        </div>
                        <div class="rating">
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star"></i>
                            <span class="d-inline-block average-rating"><span>4.0</span> (15)</span>
                        </div>
                        <div class="all-btn all-category d-flex align-items-center">
                            <a href="checkout.html" class="btn btn-primary">BUY NOW</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 d-flex">
            <div class="course-box course-design d-flex ">
                <div class="product">
                    <div class="product-img">
                        <a href="course-details.html">
                            <img class="img-fluid" alt="" src="assets/img/course/course-11.jpg">
                        </a>
                        <div class="price">
                            <h3>$200 <span>$99.00</span></h3>
                        </div>
                    </div>
                    <div class="product-content">
                        <div class="course-group d-flex">
                            <div class="course-group-img d-flex">
                                <a href="instructor-profile.html"><img src="assets/img/user/user2.jpg" alt=""
                                        class="img-fluid"></a>
                                <div class="course-name">
                                    <h4><a href="instructor-profile.html">Jenis R.</a></h4>
                                    <p>Instructor</p>
                                </div>
                            </div>
                            <div class="course-share d-flex align-items-center justify-content-center">
                                <a href="#rate"><i class="fa-regular fa-heart"></i></a>
                            </div>
                        </div>
                        <h3 class="title"><a href="course-details.html">Wordpress for Beginners -
                                Master Wordpress Quickly</a></h3>
                        <div class="course-info d-flex align-items-center">
                            <div class="rating-img d-flex align-items-center">
                                <img src="assets/img/icon/icon-01.svg" alt="">
                                <p>12+ Lesson</p>
                            </div>
                            <div class="course-view d-flex align-items-center">
                                <img src="assets/img/icon/icon-02.svg" alt="">
                                <p>9hr 30min</p>
                            </div>
                        </div>
                        <div class="rating">
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star"></i>
                            <span class="d-inline-block average-rating"><span>4.0</span> (15)</span>
                        </div>
                        <div class="all-btn all-category d-flex align-items-center">
                            <a href="checkout.html" class="btn btn-primary">BUY NOW</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 d-flex">
            <div class="course-box course-design d-flex ">
                <div class="product">
                    <div class="product-img">
                        <a href="course-details.html">
                            <img class="img-fluid" alt="" src="assets/img/course/course-12.jpg">
                        </a>
                        <div class="price">
                            <h3 class="free-color">FREE</h3>
                        </div>
                    </div>
                    <div class="product-content">
                        <div class="course-group d-flex">
                            <div class="course-group-img d-flex">
                                <a href="instructor-profile.html"><img src="assets/img/user/user3.jpg" alt=""
                                        class="img-fluid"></a>
                                <div class="course-name">
                                    <h4><a href="instructor-profile.html">Jesse Stevens</a></h4>
                                    <p>Instructor</p>
                                </div>
                            </div>
                            <div class="course-share d-flex align-items-center justify-content-center">
                                <a href="#rate"><i class="fa-regular fa-heart"></i></a>
                            </div>
                        </div>
                        <h3 class="title"><a href="course-details.html">Sketch from A to Z (2022):
                                Become an app designer</a></h3>
                        <div class="course-info d-flex align-items-center">
                            <div class="rating-img d-flex align-items-center">
                                <img src="assets/img/icon/icon-01.svg" alt="">
                                <p>12+ Lesson</p>
                            </div>
                            <div class="course-view d-flex align-items-center">
                                <img src="assets/img/icon/icon-02.svg" alt="">
                                <p>9hr 30min</p>
                            </div>
                        </div>
                        <div class="rating">
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star"></i>
                            <span class="d-inline-block average-rating"><span>4.0</span> (15)</span>
                        </div>
                        <div class="all-btn all-category d-flex align-items-center">
                            <a href="checkout.html" class="btn btn-primary">BUY NOW</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 d-flex">
            <div class="course-box course-design d-flex ">
                <div class="product">
                    <div class="product-img">
                        <a href="course-details.html">
                            <img class="img-fluid" alt="" src="assets/img/course/course-13.jpg">
                        </a>
                        <div class="price">
                            <h3 class="free-color">FREE</h3>
                        </div>
                    </div>
                    <div class="product-content">
                        <div class="course-group d-flex">
                            <div class="course-group-img d-flex">
                                <a href="instructor-profile.html"><img src="assets/img/user/user4.jpg" alt=""
                                        class="img-fluid"></a>
                                <div class="course-name">
                                    <h4><a href="instructor-profile.html">Nicole Brown</a></h4>
                                    <p>Instructor</p>
                                </div>
                            </div>
                            <div class="course-share d-flex align-items-center justify-content-center">
                                <a href="#rate" class="active-heart"><i class="fa-regular fa-heart"></i></a>
                            </div>
                        </div>
                        <h3 class="title"><a href="course-details.html">Learn Angular Fundamentals
                                From ...</a></h3>
                        <div class="course-info d-flex align-items-center">
                            <div class="rating-img d-flex align-items-center">
                                <img src="assets/img/icon/icon-01.svg" alt="">
                                <p>12+ Lesson</p>
                            </div>
                            <div class="course-view d-flex align-items-center">
                                <img src="assets/img/icon/icon-02.svg" alt="">
                                <p>9hr 30min</p>
                            </div>
                        </div>
                        <div class="rating">
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star"></i>
                            <span class="d-inline-block average-rating"><span>4.0</span> (15)</span>
                        </div>
                        <div class="all-btn all-category d-flex align-items-center">
                            <a href="checkout.html" class="btn btn-primary">BUY NOW</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 d-flex">
            <div class="course-box course-design d-flex ">
                <div class="product">
                    <div class="product-img">
                        <a href="course-details.html">
                            <img class="img-fluid" alt="" src="assets/img/course/course-14.jpg">
                        </a>
                        <div class="price">
                            <h3>$29.99</h3>
                        </div>
                    </div>
                    <div class="product-content">
                        <div class="course-group d-flex">
                            <div class="course-group-img d-flex">
                                <a href="instructor-profile.html"><img src="assets/img/user/user5.jpg" alt=""
                                        class="img-fluid"></a>
                                <div class="course-name">
                                    <h4><a href="instructor-profile.html">John Smith</a></h4>
                                    <p>Instructor</p>
                                </div>
                            </div>
                            <div class="course-share d-flex align-items-center justify-content-center">
                                <a href="#rate" class="active-heart"><i class="fa-regular fa-heart"></i></a>
                            </div>
                        </div>
                        <h3 class="title"><a href="course-details.html">Build Responsive Real World
                                Websites with ...</a></h3>
                        <div class="course-info d-flex align-items-center">
                            <div class="rating-img d-flex align-items-center">
                                <img src="assets/img/icon/icon-01.svg" alt="">
                                <p>12+ Lesson</p>
                            </div>
                            <div class="course-view d-flex align-items-center">
                                <img src="assets/img/icon/icon-02.svg" alt="">
                                <p>9hr 30min</p>
                            </div>
                        </div>
                        <div class="rating">
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star"></i>
                            <span class="d-inline-block average-rating"><span>4.0</span> (15)</span>
                        </div>
                        <div class="all-btn all-category d-flex align-items-center">
                            <a href="checkout.html" class="btn btn-primary">BUY NOW</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 d-flex">
            <div class="course-box course-design d-flex ">
                <div class="product">
                    <div class="product-img">
                        <a href="course-details.html">
                            <img class="img-fluid" alt="" src="assets/img/course/course-15.jpg">
                        </a>
                        <div class="price">
                            <h3>$300 <span>$99.00</span></h3>
                        </div>
                    </div>
                    <div class="product-content">
                        <div class="course-group d-flex">
                            <div class="course-group-img d-flex">
                                <a href="instructor-profile.html"><img src="assets/img/user/user6.jpg" alt=""
                                        class="img-fluid"></a>
                                <div class="course-name">
                                    <h4><a href="instructor-profile.html">Stella Johnson</a></h4>
                                    <p>Instructor</p>
                                </div>
                            </div>
                            <div class="course-share d-flex align-items-center justify-content-center">
                                <a href="#rate" class="active-heart"><i class="fa-regular fa-heart"></i></a>
                            </div>
                        </div>
                        <h3 class="title"><a href="course-details.html">C# Developers Double Your
                                Coding Speed with ...</a></h3>
                        <div class="course-info d-flex align-items-center">
                            <div class="rating-img d-flex align-items-center">
                                <img src="assets/img/icon/icon-01.svg" alt="">
                                <p>12+ Lesson</p>
                            </div>
                            <div class="course-view d-flex align-items-center">
                                <img src="assets/img/icon/icon-02.svg" alt="">
                                <p>9hr 30min</p>
                            </div>
                        </div>
                        <div class="rating">
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star"></i>
                            <span class="d-inline-block average-rating"><span>4.0</span> (15)</span>
                        </div>
                        <div class="all-btn all-category d-flex align-items-center">
                            <a href="checkout.html" class="btn btn-primary">BUY NOW</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 d-flex">
            <div class="course-box course-design d-flex ">
                <div class="product">
                    <div class="product-img">
                        <a href="course-details.html">
                            <img class="img-fluid" alt="" src="assets/img/course/course-16.jpg">
                        </a>
                        <div class="price">
                            <h3>$200 <span>$99.00</span></h3>
                        </div>
                    </div>
                    <div class="product-content">
                        <div class="course-group d-flex">
                            <div class="course-group-img d-flex">
                                <a href="instructor-profile.html"><img src="assets/img/user/user.jpg" alt=""
                                        class="img-fluid"></a>
                                <div class="course-name">
                                    <h4><a href="instructor-profile.html">John Michael</a></h4>
                                    <p>Instructor</p>
                                </div>
                            </div>
                            <div class="course-share d-flex align-items-center justify-content-center">
                                <a href="#rate"><i class="fa-regular fa-heart"></i></a>
                            </div>
                        </div>
                        <h3 class="title"><a href="course-details.html">Learn JavaScript and Express
                                to become a...</a></h3>
                        <div class="course-info d-flex align-items-center">
                            <div class="rating-img d-flex align-items-center">
                                <img src="assets/img/icon/icon-01.svg" alt="">
                                <p>12+ Lesson</p>
                            </div>
                            <div class="course-view d-flex align-items-center">
                                <img src="assets/img/icon/icon-02.svg" alt="">
                                <p>9hr 30min</p>
                            </div>
                        </div>
                        <div class="rating">
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star"></i>
                            <span class="d-inline-block average-rating"><span>4.0</span> (15)</span>
                        </div>
                        <div class="all-btn all-category d-flex align-items-center">
                            <a href="checkout.html" class="btn btn-primary">BUY NOW</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 d-flex">
            <div class="course-box course-design d-flex ">
                <div class="product">
                    <div class="product-img">
                        <a href="course-details.html">
                            <img class="img-fluid" alt="" src="assets/img/course/course-13.jpg">
                        </a>
                        <div class="price">
                            <h3>$300 <span>$99.00</span></h3>
                        </div>
                    </div>
                    <div class="product-content">
                        <div class="course-group d-flex">
                            <div class="course-group-img d-flex">
                                <a href="instructor-profile.html"><img src="assets/img/user/user4.jpg" alt=""
                                        class="img-fluid"></a>
                                <div class="course-name">
                                    <h4><a href="instructor-profile.html">Jesse Stevens</a></h4>
                                    <p>Instructor</p>
                                </div>
                            </div>
                            <div class="course-share d-flex align-items-center justify-content-center">
                                <a href="#rate"><i class="fa-regular fa-heart"></i></a>
                            </div>
                        </div>
                        <h3 class="title"><a href="course-details.html">Learn and Understand
                                AngularJS to become a ...</a></h3>
                        <div class="course-info d-flex align-items-center">
                            <div class="rating-img d-flex align-items-center">
                                <img src="assets/img/icon/icon-01.svg" alt="">
                                <p>12+ Lesson</p>
                            </div>
                            <div class="course-view d-flex align-items-center">
                                <img src="assets/img/icon/icon-02.svg" alt="">
                                <p>9hr 30min</p>
                            </div>
                        </div>
                        <div class="rating">
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star"></i>
                            <span class="d-inline-block average-rating"><span>4.0</span> (15)</span>
                        </div>
                        <div class="all-btn all-category d-flex align-items-center">
                            <a href="checkout.html" class="btn btn-primary">BUY NOW</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 d-flex">
            <div class="course-box course-design d-flex ">
                <div class="product">
                    <div class="product-img">
                        <a href="course-details.html">
                            <img class="img-fluid" alt="" src="assets/img/course/course-17.jpg">
                        </a>
                        <div class="price">
                            <h3 class="free-color">FREE</h3>
                        </div>
                    </div>
                    <div class="product-content">
                        <div class="course-group d-flex">
                            <div class="course-group-img d-flex">
                                <a href="instructor-profile.html"><img src="assets/img/user/user6.jpg" alt=""
                                        class="img-fluid"></a>
                                <div class="course-name">
                                    <h4><a href="instructor-profile.html">Monroe Parker</a></h4>
                                    <p>Instructor</p>
                                </div>
                            </div>
                            <div class="course-share d-flex align-items-center justify-content-center">
                                <a href="#rate"><i class="fa-regular fa-heart"></i></a>
                            </div>
                        </div>
                        <h3 class="title"><a href="course-details.html">Responsive Web Design
                                Essentials HTML5 CSS3 ...</a></h3>
                        <div class="course-info d-flex align-items-center">
                            <div class="rating-img d-flex align-items-center">
                                <img src="assets/img/icon/icon-01.svg" alt="">
                                <p>12+ Lesson</p>
                            </div>
                            <div class="course-view d-flex align-items-center">
                                <img src="assets/img/icon/icon-02.svg" alt="">
                                <p>9hr 30min</p>
                            </div>
                        </div>
                        <div class="rating">
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star"></i>
                            <span class="d-inline-block average-rating"><span>4.0</span> (15)</span>
                        </div>
                        <div class="all-btn all-category d-flex align-items-center">
                            <a href="checkout.html" class="btn btn-primary">BUY NOW</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <app-pagination/>
</template>